<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Box Tree API Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="DREAM" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-DREAM" rel="stylesheet" type="text/css">
  <link href="https://drafts.css-houdini.org/box-tree-api-1/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Box Tree API Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">A Collection of Interesting Ideas, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/box-tree-api-1/">https://drafts.css-houdini.org/box-tree-api-1/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bbox-tree-api%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[box-tree-api] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (<span class="p-org org">Google</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="4200"><a class="p-name fn u-email email" href="mailto:peter.linss@hp.com">Peter Linss</a>
     <dd class="editor p-author h-card vcard" data-editor-id="73001"><a class="p-name fn u-email email" href="mailto:ikilpatrick@chromium.org">Ian Kilpatrick</a>
     <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:rossen.atanassov@microsoft.com">Rossen Atanassov</a>
     <dt class="editor">Former Editor:
     <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shanestephens@google.com">Shane Stephens</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/box-tree-api-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Layout as described by CSS produces boxes that control how content is displayed and positioned. This specification describes an API for accessing information about these boxes.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#boxes-and-fragments"><span class="secno">2</span> <span class="content">Boxes and Fragments</span></a>
    <li><a href="#api"><span class="secno">3</span> <span class="content">API</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>The layout stage of CSS is responsible for generating the position and size of
a document’s content.  During this process, each DOM element produces
potentially many boxes, each of which in turn produce potentially many
fragments.</p>
   <p>This specification describes an API that gives developers access to geometry,
text and other information about boxes and fragments.</p>
   <h2 class="heading settled" data-level="2" id="boxes-and-fragments"><span class="secno">2. </span><span class="content">Boxes and Fragments</span><a class="self-link" href="#boxes-and-fragments"></a></h2>
   <p>The <a data-link-type="biblio" href="#biblio-css-display-3">[css-display-3]</a> specification describes the relationship between
elements, boxes, and fragments.</p>
   <p>Elements and pseudo-elements generate zero or more fragments, each of which
generates a fragment tree.</p>
   <p>Fragments do not in general form a tree that maps cleanly back to the DOM. When
an element generates multiple fragment trees, the element that generates a least common ancestor can be arbitrarily far up the DOM tree.</p>
   <div class="example" id="example-8d69a848">
    <a class="self-link" href="#example-8d69a848"></a> Assuming that layout places "foo bar" on the first line, and "baz" on the
	second, the following HTML produces six fragments in a single tree. 
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- f>p</c-><c- p>::</c-><c- nd>first-line</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c-> <c- p>}</c->

<c- f>p</c-><c- p>::</c-><c- nd>first-letter</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c-> <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>p</c-><c- p>></c->foo <c- p>&lt;</c-><c- f>i</c-><c- p>></c->bar baz<c- p>&lt;/</c-><c- f>i</c-><c- p>>&lt;/</c-><c- f>p</c-><c- p>></c->
</pre>
    <p>The fragments are:</p>
    <ul>
     <li data-md>
      <p>the first line box</p>
     <li data-md>
      <p>the second line box</p>
     <li data-md>
      <p>the first letter fragment, parented by the first line box and styled by the first-letter rule.</p>
     <li data-md>
      <p>a fragment containing "oo", parented by the first line box and styled by the first-line rule.</p>
     <li data-md>
      <p>a fragment containing "bar", parented by the first line box and italic.</p>
     <li data-md>
      <p>a fragment containing "baz", parented by the second line box and italic.</p>
    </ul>
    <p>The italic element produces two fragments ("bar" and "baz"), each in its own
	tree. In this example, the paragraph element generates the common root for
	these fragments; however if (for example) the paragraph element were itself a
	descendant of a multi-column div then the common root may be further up the
	tree.</p>
   </div>
   <p>Boxes are not explicitly exposed by this API.</p>
   <h2 class="heading settled" data-level="3" id="api"><span class="secno">3. </span><span class="content">API</span><a class="self-link" href="#api"></a></h2>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="deadfragmentinformation"><code><c- g>DeadFragmentInformation</c-></code></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node"><c- n>Node</c-></a> <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="Node" id="dom-deadfragmentinformation-node"><code><c- g>node</c-></code><a class="self-link" href="#dom-deadfragmentinformation-node"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-deadfragmentinformation-width"><code><c- g>width</c-></code><a class="self-link" href="#dom-deadfragmentinformation-width"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-deadfragmentinformation-height"><code><c- g>height</c-></code><a class="self-link" href="#dom-deadfragmentinformation-height"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-deadfragmentinformation-top"><code><c- g>top</c-></code><a class="self-link" href="#dom-deadfragmentinformation-top"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="double" id="dom-deadfragmentinformation-left"><code><c- g>left</c-></code><a class="self-link" href="#dom-deadfragmentinformation-left"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="boolean" id="dom-deadfragmentinformation-isoverflowed"><code><c- g>isOverflowed</c-></code><a class="self-link" href="#dom-deadfragmentinformation-isoverflowed"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation"><c- n>DeadFragmentInformation</c-></a>>? <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<DeadFragmentInformation>?" id="dom-deadfragmentinformation-children"><code><c- g>children</c-></code><a class="self-link" href="#dom-deadfragmentinformation-children"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation①"><c- n>DeadFragmentInformation</c-></a>? <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="DeadFragmentInformation?" id="dom-deadfragmentinformation-nextsibling"><code><c- g>nextSibling</c-></code><a class="self-link" href="#dom-deadfragmentinformation-nextsibling"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation②"><c- n>DeadFragmentInformation</c-></a>? <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="DeadFragmentInformation?" id="dom-deadfragmentinformation-previoussibling"><code><c- g>previousSibling</c-></code><a class="self-link" href="#dom-deadfragmentinformation-previoussibling"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation③"><c- n>DeadFragmentInformation</c-></a>? <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="DeadFragmentInformation?" id="dom-deadfragmentinformation-nextinbox"><code><c- g>nextInBox</c-></code><a class="self-link" href="#dom-deadfragmentinformation-nextinbox"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation④"><c- n>DeadFragmentInformation</c-></a>? <dfn class="idl-code" data-dfn-for="DeadFragmentInformation" data-dfn-type="attribute" data-export data-readonly data-type="DeadFragmentInformation?" id="dom-deadfragmentinformation-previousinbox"><code><c- g>previousInBox</c-></code><a class="self-link" href="#dom-deadfragmentinformation-previousinbox"></a></dfn>;
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-fragmentfilter"><code><c- g>FragmentFilter</c-></code></dfn> {
  <dfn class="idl-code" data-dfn-for="FragmentFilter" data-dfn-type="enum-value" data-export id="dom-fragmentfilter-direct-fragments-only"><code><c- s>"direct-fragments-only"</c-></code><a class="self-link" href="#dom-fragmentfilter-direct-fragments-only"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="FragmentFilter" data-dfn-type="enum-value" data-export id="dom-fragmentfilter-fragment-hierarchy"><code><c- s>"fragment-hierarchy"</c-></code><a class="self-link" href="#dom-fragmentfilter-fragment-hierarchy"></a></dfn>
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- g>Element</c-></a> {
  <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation⑤"><c- n>DeadFragmentInformation</c-></a>> <dfn class="idl-code" data-dfn-for="Element" data-dfn-type="method" data-export data-lt="getFragmentInformation(filter)" id="dom-element-getfragmentinformation"><code><c- g>getFragmentInformation</c-></code><a class="self-link" href="#dom-element-getfragmentinformation"></a></dfn>(<a class="n" data-link-type="idl-name" href="#enumdef-fragmentfilter" id="ref-for-enumdef-fragmentfilter"><c- n>FragmentFilter</c-></a> <dfn class="idl-code" data-dfn-for="Element/getFragmentInformation(filter)" data-dfn-type="argument" data-export id="dom-element-getfragmentinformation-filter-filter"><code><c- g>filter</c-></code><a class="self-link" href="#dom-element-getfragmentinformation-filter-filter"></a></dfn>);
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document"><c- g>Document</c-></a> {
  <c- b>void</c-> <dfn class="idl-code" data-dfn-for="Document" data-dfn-type="method" data-export data-lt="layoutNow()" id="dom-document-layoutnow"><code><c- g>layoutNow</c-></code><a class="self-link" href="#dom-document-layoutnow"></a></dfn>();
};
</pre>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-deadfragmentinformation-children">children</a><span>, in §3</span>
   <li><a href="#deadfragmentinformation">DeadFragmentInformation</a><span>, in §3</span>
   <li><a href="#dom-fragmentfilter-direct-fragments-only">"direct-fragments-only"</a><span>, in §3</span>
   <li><a href="#enumdef-fragmentfilter">FragmentFilter</a><span>, in §3</span>
   <li><a href="#dom-fragmentfilter-fragment-hierarchy">"fragment-hierarchy"</a><span>, in §3</span>
   <li><a href="#dom-element-getfragmentinformation">getFragmentInformation(filter)</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-height">height</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-isoverflowed">isOverflowed</a><span>, in §3</span>
   <li><a href="#dom-document-layoutnow">layoutNow()</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-left">left</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-nextinbox">nextInBox</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-nextsibling">nextSibling</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-node">node</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-previousinbox">previousInBox</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-previoussibling">previousSibling</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-top">top</a><span>, in §3</span>
   <li><a href="#dom-deadfragmentinformation-width">width</a><span>, in §3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-node">
   <a href="https://dom.spec.whatwg.org/#node">https://dom.spec.whatwg.org/#node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-node">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">3. API</a> <a href="#ref-for-idl-double①">(2)</a> <a href="#ref-for-idl-double②">(3)</a> <a href="#ref-for-idl-double③">(4)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-node" style="color:initial">Node</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>interface</c-> <a href="#deadfragmentinformation"><code><c- g>DeadFragmentInformation</c-></code></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node①"><c- n>Node</c-></a> <a data-readonly data-type="Node" href="#dom-deadfragmentinformation-node"><code><c- g>node</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-deadfragmentinformation-width"><code><c- g>width</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-deadfragmentinformation-height"><code><c- g>height</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-deadfragmentinformation-top"><code><c- g>top</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a> <a data-readonly data-type="double" href="#dom-deadfragmentinformation-left"><code><c- g>left</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a data-readonly data-type="boolean" href="#dom-deadfragmentinformation-isoverflowed"><code><c- g>isOverflowed</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation⑥"><c- n>DeadFragmentInformation</c-></a>>? <a data-readonly data-type="FrozenArray<DeadFragmentInformation>?" href="#dom-deadfragmentinformation-children"><code><c- g>children</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation①①"><c- n>DeadFragmentInformation</c-></a>? <a data-readonly data-type="DeadFragmentInformation?" href="#dom-deadfragmentinformation-nextsibling"><code><c- g>nextSibling</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation②①"><c- n>DeadFragmentInformation</c-></a>? <a data-readonly data-type="DeadFragmentInformation?" href="#dom-deadfragmentinformation-previoussibling"><code><c- g>previousSibling</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation③①"><c- n>DeadFragmentInformation</c-></a>? <a data-readonly data-type="DeadFragmentInformation?" href="#dom-deadfragmentinformation-nextinbox"><code><c- g>nextInBox</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation④①"><c- n>DeadFragmentInformation</c-></a>? <a data-readonly data-type="DeadFragmentInformation?" href="#dom-deadfragmentinformation-previousinbox"><code><c- g>previousInBox</c-></code></a>;
};

<c- b>enum</c-> <a href="#enumdef-fragmentfilter"><code><c- g>FragmentFilter</c-></code></a> {
  <a href="#dom-fragmentfilter-direct-fragments-only"><code><c- s>"direct-fragments-only"</c-></code></a>,
  <a href="#dom-fragmentfilter-fragment-hierarchy"><code><c- s>"fragment-hierarchy"</c-></code></a>
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①"><c- g>Element</c-></a> {
  <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#deadfragmentinformation" id="ref-for-deadfragmentinformation⑤①"><c- n>DeadFragmentInformation</c-></a>> <a href="#dom-element-getfragmentinformation"><code><c- g>getFragmentInformation</c-></code></a>(<a class="n" data-link-type="idl-name" href="#enumdef-fragmentfilter" id="ref-for-enumdef-fragmentfilter①"><c- n>FragmentFilter</c-></a> <a href="#dom-element-getfragmentinformation-filter-filter"><code><c- g>filter</c-></code></a>);
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①"><c- g>Document</c-></a> {
  <c- b>void</c-> <a href="#dom-document-layoutnow"><code><c- g>layoutNow</c-></code></a>();
};

</pre>
  <aside class="dfn-panel" data-for="deadfragmentinformation">
   <b><a href="#deadfragmentinformation">#deadfragmentinformation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-deadfragmentinformation">3. API</a> <a href="#ref-for-deadfragmentinformation①">(2)</a> <a href="#ref-for-deadfragmentinformation②">(3)</a> <a href="#ref-for-deadfragmentinformation③">(4)</a> <a href="#ref-for-deadfragmentinformation④">(5)</a> <a href="#ref-for-deadfragmentinformation⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-fragmentfilter">
   <b><a href="#enumdef-fragmentfilter">#enumdef-fragmentfilter</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-fragmentfilter">3. API</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>